30 août 2025Français

Débloquez un positionnement puissant et conscient des collisions en CSS. Apprenez comment @position-try et le positionnement par ancre résolvent les défis d'interface complexes comme les infobulles et les popovers, réduisant la dépendance à JavaScript.

Au-delà de `position: absolute` : Plongée au cœur de CSS @position-try et du positionnement par ancre

Pendant des décennies, les développeurs web ont lutté avec une série de défis d'interface utilisateur courants : créer des infobulles, des popovers, des menus contextuels et d'autres éléments flottants qui se positionnent intelligemment par rapport à un déclencheur. L'approche traditionnelle a presque toujours impliqué une danse délicate entre le CSS `position: absolute` et une forte dose de JavaScript pour calculer les positions, détecter les collisions avec la fenêtre d'affichage (viewport) et inverser le placement de l'élément à la volée.

Cette solution, bien qu'efficace, comporte son propre lot d'inconvénients : une surcharge de performance, une complexité de maintenance et une bataille constante pour maintenir la robustesse de la logique. Des bibliothèques comme Popper.js sont devenues des standards de l'industrie précisément parce que ce problème était très difficile à résoudre nativement. Mais que se passerait-il si nous pouvions déclarer ces stratégies de positionnement complexes directement en CSS ?

Voici l'API de positionnement par ancre CSS (CSS Anchor Positioning), une proposition révolutionnaire qui s'apprête à transformer la manière dont nous gérons ces scénarios. À sa base se trouvent deux concepts puissants : la capacité d'« ancrer » un élément à un autre, indépendamment de leur relation dans le DOM, et un ensemble de règles de repli définies avec @position-try. Cet article propose une exploration complète de cette nouvelle frontière du CSS, vous permettant de construire des interfaces utilisateur plus résilientes, performantes et déclaratives.

Le problème persistant du positionnement traditionnel

Avant de pouvoir apprécier l'élégance de la nouvelle solution, nous devons d'abord comprendre les limites de l'ancienne. L'outil de base du positionnement dynamique a toujours été `position: absolute`, qui positionne un élément par rapport à son ancêtre positionné le plus proche.

La béquille JavaScript

Considérez une simple infobulle qui doit apparaître au-dessus d'un bouton. Avec `position: absolute`, vous pouvez la placer correctement. Mais que se passe-t-il lorsque ce bouton est proche du bord supérieur de la fenêtre du navigateur ? L'infobulle est coupée. Ou s'il est près du bord droit ? L'infobulle dépasse et déclenche une barre de défilement horizontale.

Pour résoudre ce problème, les développeurs se sont historiquement appuyés sur JavaScript :

Obtenir la position et les dimensions de l'élément d'ancrage avec `getBoundingClientRect()`.
Obtenir les dimensions de l'infobulle.
Obtenir les dimensions de la fenêtre d'affichage (`window.innerWidth`, `window.innerHeight`).
Effectuer une série de calculs pour déterminer les valeurs `top` et `left` idéales.
Vérifier si cette position idéale provoque une collision avec les bords de la fenêtre d'affichage.
Si c'est le cas, recalculer pour une position alternative (par exemple, la faire apparaître sous le bouton).
Ajouter des écouteurs d'événements pour `scroll` et `resize` afin de répéter tout ce processus chaque fois que la mise en page pourrait changer.

Cela représente une quantité significative de logique pour ce qui semble être une tâche purement présentationnelle. C'est fragile, peut provoquer des sauts de mise en page (layout jank) si ce n'est pas implémenté avec soin, et augmente la taille du bundle ainsi que le travail sur le thread principal de votre application.

Un nouveau paradigme : Introduction au positionnement par ancre CSS

L'API de positionnement par ancre CSS offre un moyen déclaratif, entièrement en CSS, de gérer ces relations. L'idée fondamentale est de créer une connexion entre deux éléments : l'élément positionné (par exemple, l'infobulle) et son ancre (par exemple, le bouton).

Propriétés fondamentales : `anchor-name` et `position-anchor`

La magie commence avec deux nouvelles propriétés CSS :

`anchor-name` : Cette propriété est appliquée à l'élément que vous souhaitez utiliser comme point de référence. Elle donne à l'ancre un nom unique, préfixé par des tirets, qui peut être référencé ailleurs.
`position-anchor` : Cette propriété est appliquée à l'élément positionné et lui indique quelle ancre nommée utiliser pour ses calculs de positionnement.

Voyons un exemple de base :

            
<!-- Structure HTML -->
<button id="my-button">Passez la souris</button>
<div class="tooltip">Ceci est une infobulle !</div>

<!-- CSS -->
#my-button {
  anchor-name: --my-button-anchor;
}

.tooltip {
  position: absolute;
  position-anchor: --my-button-anchor;
  /* Nous pouvons maintenant positionner par rapport à l'ancre */
  bottom: anchor(top);
  left: anchor(center);
}

Dans cet extrait, le bouton est désigné comme une ancre nommée `--my-button-anchor`. L'infobulle utilise ensuite `position-anchor` pour se lier à cette ancre. La partie vraiment révolutionnaire est la fonction `anchor()`, qui nous permet d'utiliser les limites de l'ancre (`top`, `bottom`, `left`, `right`, `center`) comme valeurs pour nos propriétés de positionnement.

Cela simplifie déjà les choses, mais ne résout pas encore le problème de collision avec la fenêtre d'affichage. C'est là que @position-try entre en jeu.

Le cœur de la solution : `@position-try` et `position-fallback`

Si le positionnement par ancre crée le lien entre les éléments, `@position-try` fournit l'intelligence. Il vous permet de définir une liste priorisée de stratégies de positionnement alternatives. Le navigateur essaiera alors chaque stratégie dans l'ordre, en sélectionnant la première qui permet à l'élément positionné de s'insérer dans son bloc conteneur (généralement la fenêtre d'affichage) sans être coupé.

Définir les options de repli

Un bloc `@position-try` est un ensemble de règles CSS nommé qui définit une seule option de positionnement. Vous pouvez en créer autant que nécessaire.

            
/* Option 1 : Placer au-dessus de l'ancre */
@position-try --tooltip-top {
  bottom: anchor(top);
  left: anchor(center);
  transform: translateX(-50%);
}

/* Option 2 : Placer en dessous de l'ancre */
@position-try --tooltip-bottom {
  top: anchor(bottom);
  left: anchor(center);
  transform: translateX(-50%);
}

/* Option 3 : Placer à droite de l'ancre */
@position-try --tooltip-right {
  left: anchor(right);
  top: anchor(center);
  transform: translateY(-50%);
}

/* Option 4 : Placer à gauche de l'ancre */
@position-try --tooltip-left {
  right: anchor(left);
  top: anchor(center);
  transform: translateY(-50%);
}

Remarquez comment chaque bloc définit une stratégie de positionnement complète. Nous avons créé quatre options distinctes : en haut, en bas, à droite et à gauche par rapport à l'ancre.

Appliquer les replis avec `position-fallback`

Une fois que vous avez vos blocs `@position-try`, vous indiquez à l'élément positionné de les utiliser avec la propriété `position-fallback`. L'ordre est important, car il définit la priorité.

            
.tooltip {
  position: absolute;
  position-anchor: --my-button-anchor;
  position-fallback: --tooltip-top --tooltip-bottom --tooltip-right --tooltip-left;
}

Avec cette seule ligne de CSS, vous avez demandé au navigateur :

D'abord, essayez de positionner l'infobulle en utilisant les règles de `--tooltip-top`.
Si cette position entraîne la coupure de l'infobulle par la fenêtre d'affichage, ignorez-la et essayez les règles de `--tooltip-bottom`.
Si cela échoue également, essayez `--tooltip-right`.
Et si tout le reste échoue, essayez `--tooltip-left`.

Le navigateur gère automatiquement toute la détection de collision et le changement de position. Pas de `getBoundingClientRect()`, pas d'écouteurs d'événements `resize`, pas de JavaScript. C'est un changement monumental d'une logique impérative en JavaScript à une approche déclarative en CSS.

Exemple pratique complet : Le popover conscient des collisions

Construisons un exemple plus robuste qui combine le positionnement par ancre avec l'API Popover moderne pour un composant d'interface utilisateur entièrement fonctionnel, accessible et intelligent.

Étape 1 : La structure HTML

Nous utiliserons l'attribut natif `popover`, qui nous offre gratuitement la gestion de l'état (ouvert/fermé), la fonctionnalité de fermeture facile (cliquer à l'extérieur le ferme) et des avantages en matière d'accessibilité.

            
<button popovertarget="my-popover" id="popover-trigger">
  Cliquez-moi
</button>

<div id="my-popover" popover>
  <h3>Titre du Popover</h3>
  <p>Ce popover se repositionnera intelligemment pour rester dans la fenêtre d'affichage. Essayez de redimensionner votre navigateur ou de faire défiler la page !</p>
</div>

Étape 2 : Définir l'ancre

Nous désignons notre bouton comme l'ancre. Ajoutons également un style de base.

            
#popover-trigger {
  /* C'est la partie essentielle */
  anchor-name: --popover-anchor;

  /* Styles de base */
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
}

Étape 3 : Définir les options `@position-try`

Maintenant, nous créons notre cascade d'options de positionnement. Nous ajouterons une petite `margin` dans chaque cas pour créer un espace entre le popover et le déclencheur.

            
/* Priorité 1 : Positionner au-dessus du déclencheur */
@position-try --popover-top {
  bottom: anchor(top, 8px);
  left: anchor(center);
}

/* Priorité 2 : Positionner en dessous du déclencheur */
@position-try --popover-bottom {
  top: anchor(bottom, 8px);
  left: anchor(center);
}

/* Priorité 3 : Positionner à droite */
@position-try --popover-right {
  left: anchor(right, 8px);
  top: anchor(center);
}

/* Priorité 4 : Positionner à gauche */
@position-try --popover-left {
  right: anchor(left, 8px);
  top: anchor(center);
}

Note : La fonction `anchor()` peut accepter un deuxième argument optionnel, qui sert de valeur de repli. Cependant, nous utilisons ici une syntaxe non standard pour illustrer une amélioration future potentielle pour les marges. La manière correcte aujourd'hui serait d'utiliser `calc(anchor(top) - 8px)` ou similaire, mais l'intention est de créer un espacement.

Étape 4 : Styler le popover et appliquer le repli

Enfin, nous stylisons notre popover et connectons le tout.

            
#my-popover {
  /* Lier le popover à notre ancre nommée */
  position-anchor: --popover-anchor;

  /* Définir la priorité de nos options de repli */
  position-fallback: --popover-top --popover-bottom --popover-right --popover-left;

  /* Nous devons utiliser un positionnement fixed ou absolute pour que cela fonctionne */
  position: absolute;

  /* Styles par défaut */
  width: 250px;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  margin: 0; /* L'API popover ajoute une marge par défaut, nous la réinitialisons */
}

/* Le popover est masqué jusqu'à son ouverture */
#my-popover:not(:popover-open) {
  display: none;
}

Et c'est tout ! Avec ce code, vous avez un popover entièrement fonctionnel qui changera automatiquement sa position pour éviter d'être coupé par les bords de l'écran. Aucun JavaScript n'est requis pour la logique de positionnement.

Concepts avancés et contrôle affiné

L'API de positionnement par ancre offre encore plus de contrôle pour les scénarios complexes.

Plongée dans la fonction `anchor()`

La fonction `anchor()` est incroyablement polyvalente. Il ne s'agit pas seulement des quatre bords. Vous pouvez également cibler des pourcentages de la taille de l'ancre.

`anchor(left)` ou `anchor(start)` : Le bord gauche de l'ancre.
`anchor(right)` ou `anchor(end)` : Le bord droit.
`anchor(top)` : Le bord supérieur.
`anchor(bottom)` : Le bord inférieur.
`anchor(center)` : Le centre horizontal ou vertical, selon le contexte. Pour `left` ou `right`, c'est le centre horizontal. Pour `top` ou `bottom`, c'est le centre vertical.
`anchor(50%)` : Équivalent à `anchor(center)`.
`anchor(25%)` : Un point à 25% de la distance sur l'axe de l'ancre.

De plus, vous pouvez utiliser les dimensions de l'ancre dans vos calculs avec la fonction `anchor-size()` :

            
.element {
  /* Rendre l'élément deux fois moins large que son ancre */
  width: calc(anchor-size(width) * 0.5);
}

Ancres implicites

Dans certains cas, vous n'avez même pas besoin de définir explicitement `anchor-name` et `position-anchor`. Pour certaines relations, le navigateur peut déduire une ancre implicite. L'exemple le plus courant est un popover invoqué par un bouton `popovertarget`. Dans ce cas, le bouton devient automatiquement l'ancre implicite du popover, simplifiant votre CSS :

            
#my-popover {
  /* Pas besoin de position-anchor ! */
  position-fallback: --popover-top --popover-bottom;
  ...
}

Cela réduit le code répétitif et rend la relation entre le déclencheur et le popover encore plus directe.

Support des navigateurs et perspectives d'avenir

À la fin de 2023, l'API de positionnement par ancre CSS est une technologie expérimentale. Elle est disponible dans Google Chrome et Microsoft Edge derrière un drapeau de fonctionnalité (recherchez "Experimental Web Platform features" dans `chrome://flags`).

Bien qu'elle ne soit pas encore prête pour une utilisation en production sur tous les navigateurs, sa présence dans un moteur de navigateur majeur signale un engagement fort à résoudre ce problème de longue date en CSS. Il est crucial pour les développeurs de l'expérimenter, de fournir des retours aux éditeurs de navigateurs et de se préparer à un avenir où le JavaScript pour le positionnement des éléments deviendra l'exception, et non la règle.

Vous pouvez suivre son statut d'adoption sur des plateformes comme "Can I use...". Pour l'instant, considérez-le comme un outil d'amélioration progressive. Vous pouvez construire votre interface utilisateur avec `@position-try` et utiliser une requête `@supports` pour fournir une position plus simple et non changeante pour les navigateurs qui ne le supportent pas, tandis que les utilisateurs sur des navigateurs modernes bénéficient de l'expérience améliorée.

Cas d'utilisation au-delà des popovers

Les applications potentielles de cette API sont vastes et s'étendent bien au-delà des simples infobulles.

Menus de sélection personnalisés : Créez de magnifiques menus déroulants `